<script setup>
  import {
    onMounted,
    reactive,
    ref,
    toRaw,
    watch
  } from "vue";
  import {
    pageConfig
  } from "@/views/workforce/doctor_workforce/config";
  import {
    ElMessageBox
  } from "element-plus";

  const emit = defineEmits(['openViewForm', 'openEditForm'])
  const props = defineProps({
    listApi: {
      type: Function
    },
    statusApi: {
      type: Function
    },
    tableColumn: {
      type: Array
    },
    pageConfig: {
      type: Object
    },
    tableConfig: {
      type: Object
    },
    noCol: {
      type: Boolean
    }
  })
  const openSwitch = ref(true)
  const openSwitch2 = ref(true)
  const queryFormRef = ref()
  const formInline = reactive({
    status: "0"
  })
  const tableData = ref([])
  const total = ref(0)
  const currentPage = ref(1)
  const pageSize = ref(10)
  const handleSizeChange = (val) => {
    pageSize.value = val;
    getData();
  }
  const handleCurrentChange = (val) => {
    currentPage.value = val;
    getData();
  }
  onMounted(() => {
    getData();
  })

  const openViewForm = (row) => {
    emit("openViewForm", row)
  }
  const openEditForm = (row) => {
    emit("openEditForm", row)
  }

  const objectSpanMethod = ({
    row,
    column,
    rowIndex,
    columnIndex,
  }) => {
    // console.log(noCol)
    // if(!noCol){
    //   return;
    // }
    if (columnIndex === 0) {
      if (rowIndex % 2 === 0) {
        return {
          rowspan: 2,
          colspan: 1,
        }
      } else {
        return {
          rowspan: 0,
          colspan: 0,
        }
      }
    }
    if (columnIndex === 1) {
      if (rowIndex % 2 === 0) {
        return {
          rowspan: 2,
          colspan: 1,
        }
      } else {
        return {
          rowspan: 0,
          colspan: 0,
        }
      }
    }
  }

  const updateStatus = (id, status) => {
    console.log(props.statusApi)
    ElMessageBox.confirm(
      '此操作可能会影响到医生开方，请谨慎操作',
      '警告提示', {
        confirmButtonText: '继续执行',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
      props.statusApi({
        id: id,
        status: status === 1 ? 2 : 1
      }).then(() => {
        getData();
      })
    }).catch(() => {

    })
  }

  const resetForm = (formEl) => {
    if (!formEl) return
    console.log(formEl)
    formEl.resetFields()
    getData()
  };

  const resetFormParent = () => {
    resetForm(queryFormRef.value)
  }

  const screenClick = () => {
    console.log('submit!', toRaw(formInline))
    getData();
  }


  const getData = async () => {
    const options = {
      ...formInline
    }
    options.current_page = currentPage.value;
    options.per_page = pageSize.value;
    if (options.status === "0") {
      options.status = undefined
    }
    const result = await props.listApi({
      ...options
    });
    tableData.value = result.data.data
    total.value = result.data.total_number
  }

  watch(() => noCol, (newValue, oldValue) => {
    // 这里处理isRead变化后的逻辑
    console.log(`isRead变化了，新值为：${newValue}, 旧值为：${oldValue}`);
    buildFormRules()
  });
  defineExpose({
    resetFormParent
  })
</script>

<template>
  <el-form :inline="true" :model="formInline" class="formALL" ref="queryFormRef">
    <el-form-item v-for="(s, sk) in tableColumn.filter(item=>item.isSearch)" :key="sk" :prop="s.prop">
      <el-input v-if="s.formType === 'input'" style="width: 180px;" v-model="formInline[s.prop]" :placeholder="s.label"
        clearable />
      <el-select v-if="['select', 'radio'].includes(s.formType)" v-model="formInline[s.prop]" style="width: 180px;">
        <el-option v-for="(sel, selKey) in Object.keys(s.enum)" :key="selKey" :label="s.enum[sel]" :value="sel" />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="screenClick">筛选</el-button>
      <el-button @click="resetForm(queryFormRef)">重置</el-button>
      <!-- <slot name="addBtn"></slot> -->
    </el-form-item>
  </el-form>
  <div class="operation">
    <div>
      <span>本周</span>
      <span>上一周</span>
      <span>下一周</span>
      <slot name="copyBtn"></slot>
      <slot name="batchBtn"></slot>
    </div>
    <div>
      <slot name="exportBtn"></slot>
    </div>
  </div>

  <el-table :data="tableData" :span-method="!noCol?'':objectSpanMethod" border>
    <el-table-column v-for="(t, tk) in tableColumn.filter(item=>item.isTable)" :key="tk" :prop="t.prop"
      :label="t.label">
      <template #default="scope" v-if="t.enum">
        {{t.enum[scope.row[t.prop]]}}
      </template>
      <template #default="scope" v-if="t.asyncSelData">
        {{ t.asyncSelData.find(i=>i.id === scope.row[t.prop])?.name
      || t.asyncSelData.find(i=>i.id === scope.row[t.prop])?.value }}
      </template>
      <template #default="scope" v-if="t.label == '电话'">
        <el-switch v-model="openSwitch" inline-prompt active-text="开" inactive-text="关" />
      </template>
      <template #default="scope" v-if="t.label == '图文'">
        <el-switch v-model="openSwitch2" inline-prompt active-text="开" inactive-text="关" />
      </template>
    </el-table-column>
  </el-table>
  <div class="demo-pagination-block">
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
      :small="pageConfig.small" :disabled="pageConfig.disabled" :background="pageConfig.background"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>

<style scoped lang="scss">
  ::v-deep .el-table {
    color: #515a6e;
    font-weight: 400;
    font-size: 14px !important;
  }

  ::v-deep thead tr th .cell {
    color: #515a6e;
    font-weight: 500;

  }

  ::v-deep thead tr th {
    background: #fafafa !important;
  }

  ::v-deep tbody tr td {
    font-size: 13px !important;
  }

  // .operation ::v-deep .el-button>span {
  //   color: red !important;
  // }

  .el-form-item {
    margin-right: 12px;
  }

  .custom-card {
    width: 100%;
  }

  .buttonAll {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
  }

  .el-card {
    box-shadow: none;
  }

  .table-container {
    overflow-x: auto;
  }

  .upload-demo {
    display: flex;

    >* {
      position: relative;
      flex: 1;
      padding: 5px 20px;
      margin: 10px;
      background-color: white;
    }
  }

  .demo-pagination-block {
    margin: 20px 0;
    display: flex;
    justify-content: center;
  }

  .demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
  }

  .demo-pagination-block .demonstration {
    margin-bottom: 16px;
  }

  .operation {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    span {
      padding: 6px 15px;
      color: #1890ff;
      font-size: 14px;
    }
  }

  @media screen and (max-width: $sm-width) {
    .upload-demo {
      flex-direction: column;
    }
  }
</style>